import React, {Component} from 'react';
import Header from "./components/Header/index.jsx";
import List from "./components/List/index.jsx";
import Footer from "./components/Footer/index.jsx";
import todosCss from './index.module.scss'

// 任务代办
class Todos extends Component {
  // 状态在哪里，操作状态的方法就在哪里
  state = {
    todos: [
      {id: '0001', name: '吃饭', done: false},
      {id: '0002', name: '睡觉', done: true},
      {id: '0003', name: '打代码', done: false},
    ]
  }

  // 添加一条代办
  addTodo = (todoObj) => {
    const {todos} = this.state
    this.setState({todos: [todoObj, ...todos]})
  }

  // 选中、取消选中一条代办
  chooseTodo = (id, done) => {
    const {todos} = this.state
    const newTodos = todos.map(item => {
      if (item.id === id) return {...item, done}
      else return item
    })
    this.setState({todos: newTodos})
  }

  // 删除一条代办
  delTodo = (id) => {
    const {todos} = this.state
    const newTodos = todos.filter(item => item.id !== id)
    this.setState({todos: newTodos})
  }

  // 全选或取消全选
  checkedAllTodo = (done) => {
    const {todos} = this.state
    const newTodos = todos.map(item => {
      return {...item, done}
    })
    this.setState({todos: newTodos})
  }

  // 清除已完成
  clearFinishTodos = () => {
    const {todos} = this.state
    const newTodos = todos.filter(item => !item.done)
    this.setState({todos: newTodos})
  }

  render() {
    const {todos} = this.state
    return (
      <div className={todosCss.todoCon}>
        <Header addTodo={this.addTodo}/>
        <List todos={todos} chooseTodo={this.chooseTodo} delTodo={this.delTodo}/>
        <Footer todos={todos} checkedAllTodo={this.checkedAllTodo} clearFinishTodos={this.clearFinishTodos}/>
      </div>
    );
  }
}

export default Todos;
